import React, { Component } from 'react'
import { Link, withRouter } from 'react-router-dom'

import { Menu } from 'antd';

import memory from '../../utils/memoryUtils'
import menuList from '../../config/menuConfig';

import logo from '../../assets/images/logo.png'
import './index.less'

const { SubMenu } = Menu;
// 左侧导航的组件
class LeftNav extends Component {

  // 动态展示菜单列表map()
  getMenuNodes_map = menuList => {
    return menuList.map(item => {
      // {
      //   title: '首页',
      //   key: '/home',
      //   icon: 'home',
      //   children: [] 可能有也可能没有
      // }

      // <Menu.Item key="menu_item1" icon={<HomeOutlined />}>
      //   <Link to="/home">首页</Link>
      // </Menu.Item>
      if (!item.children) {
        return (
          <Menu.Item key={item.key} icon={item.icon}>
            <Link to={item.key}>{item.title}</Link>
          </Menu.Item>
        )
      } else {
        return (
          <SubMenu key={item.key} icon={item.icon} title={item.title}>
            {this.getMunuNodes(item.children)}
          </SubMenu>
        )
      }

    })
  }
  // 判断当前登录用户对item是否有全新啊
  hasAuth = (item) => {
    const username = memory.user.username
    const { key, isPublic } = item
    const menus = memory.user.role.menus
    // 1. 如果当前用户是admin
    // 2. 当前用户有次item权限：menus中有没有key
    // 3. 如果当前item是公开的，直接返回true
    if(username === 'admin' || isPublic || menus.indexOf(key) !== -1) {
      return true
    } else if(item.children) { // 4. 如果当前用户有此item的某个子item的权限
      return !!item.children.find(child => menus.indexOf(child.key) !== -1)
    }
    return false
  }
  // 动态展示菜单列表reduce()
  getMenuNodes_reduce = menuList => {
    const path = this.props.location.pathname
    return menuList.reduce((pre, item) => {
      // 如果当前用户有item对应的权限，才需要显示对应的菜单项
      if (this.hasAuth(item)) {
        // 向pre中添加 <Menu.ITem> 或 <Submenu>
        if(!item.children) {
          pre.push((
            <Menu.Item key={item.key} icon={item.icon}>
              <Link to={item.key}>{item.title}</Link>
            </Menu.Item>
          ))
        } else {
          // 查找一个与当前请求路径匹配的子Item
          const cItem = item.children.find(cItem => path.indexOf(cItem.key) === 0)
          // 如果存在，说明当前item的字列表需要展开
          if(cItem) this.openKey = item.key
          pre.push((
            <SubMenu key={item.key} icon={item.icon} title={item.title}>
              {this.getMenuNodes_reduce(item.children)}
            </SubMenu>
          ))
        }
      }
      return pre
    },[])
  }
  render() {
    const menuNode = this.getMenuNodes_reduce(menuList)
    let path = this.props.location.pathname
    if(path.indexOf('/product') === 0) {
      path = '/product'
    }
    const openKey = this.openKey
    return (
      <div className="left_nav">
        <Link to="/" className="left_nav_header">
          <img src={logo} alt="logo" />
          <h1>阿牛后台</h1>
        </Link> 
        <Menu
          mode="inline"
          theme="dark"
          selectedKeys={[path]}
          defaultOpenKeys={[openKey]}
        >
          {
            menuNode
          }
          {/* <Menu.Item key="menu_item1" icon={<HomeOutlined />}>
            <Link to="/home">首页</Link>
          </Menu.Item>
          <SubMenu key="sub_menu1" icon={<MenuOutlined />} title="商品">
              <Menu.Item key="menu_item2" icon={<PartitionOutlined />}>
                <Link to="/category">品类管理</Link>
              </Menu.Item>
              <Menu.Item key="menu_item3" icon={<SecurityScanOutlined />}>
                <Link to="/product">商品管理</Link>
              </Menu.Item>
          </SubMenu>
          <Menu.Item key="menu_item4" icon={<UserOutlined />}>
            <Link to="/user">用户管理</Link>
          </Menu.Item>
          <Menu.Item key="menu_item5" icon={<TeamOutlined />}>
            <Link to="role">角色管理</Link>
          </Menu.Item>
          <SubMenu key="sub_menu2" icon={<AreaChartOutlined />} title="图形图表">
            <Menu.Item key="menu_item6" icon={<BarChartOutlined />}>
              <Link to="/charts/bar">柱状图</Link>
            </Menu.Item>
            <Menu.Item key="menu_item7" icon={<LineChartOutlined />}>
              <Link to="/charts/line">折线图</Link>
            </Menu.Item>
            <Menu.Item key="menu_item8" icon={<PieChartOutlined />}>
              <Link to="/charts/pie">饼图</Link>
            </Menu.Item>
          </SubMenu>
          <Menu.Item key="menu_item9" icon={<AccountBookOutlined />}>
            <Link to="/order">订单管理</Link>
          </Menu.Item> */}
        </Menu>
      </div>
    )
  }
}
// withRouter高阶组件：包装费路由组件，返回一个新组建，向费路由组件传递history、location、match
export default withRouter(LeftNav)